<template>
	<div class="alertRecord">
		<div class="header">告警记录</div>
		<div id="alertRecordCount"></div>
	</div>
</template>
<script>
export default {
	name: 'alertRecord',
	data() {
		return {};
	},
	methods: {
		initChart() {
			const myChart = this.$echarts.init(
				document.getElementById('alertRecordCount')
			);
			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				},
				grid: {
					top: '8',
					right: '12',
					bottom: '0',
					left: '0',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						splitLine: {
							show: false
						},
						axisTick: { show: false },
						axisLabel: {
							color: '#E4E4E4',
						},
						data: ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00', '24:00']
					}
				],
				yAxis: [
					{
						type: 'value',
						splitNumber: 3,
						splitLine: {
							lineStyle: {
								type: 'dashed'
							}
						},
						axisLabel: {
							color: '#E4E4E4'
						}
					}
				],
				series: [
					{
						name: '告警数量',
						type: 'line',
						stack: 'Total',
						smooth: true,
						lineStyle: {
							width: 0
						},
						showSymbol: false,
						areaStyle: {
							opacity: 0.8,
							color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#43ECF9'
								},
								{
									offset: 1,
									color: 'rgba(67, 236, 249, 0.5)'
								}
							])
						},
						emphasis: {
							focus: 'series'
						},
						data: [140, 232, 101, 264, 90, 340, 250]
					}
				]
			};
			myChart.setOption(option);
		}
	},
	mounted() {
		this.initChart();
	}
};
</script>
<style lang="scss" scoped>
.alertRecord {
	width: 100%;
	height: 100%;
	background: #0e2551;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	.header {
		display: flex;
		font-weight: bold;
		margin-left: 5px;
		background: linear-gradient(to right, #226dc4, #132054);
		font-size: 12px;
		line-height: 20px;
		padding: 0 10px;
		margin-bottom: 4px;
		width: 70px;
		height: 20px;
	}
	#alertRecordCount {
		width: 100%;
		flex: 1;
	}
}
</style>
